iView - Scroll

一套基於 Vue.js 的高質量UI 組件庫，此篇介紹Scroll(無限卷軸顯示資料清單)

Github

iview/iview

範例

html

<scroll :on-reach-bottom="handleReachBottom" 
        :on-reach-top="handleReachTop" 
        distance-to-edge=10
        loading-text="Loading"
        height="300">

        <!-- list data -->
        <card style="width:320px;margin:32px 0" v-for="(item, index) in listData" :key="item.id">
                <div style="text-align:center">
                    <img style="width:50px;height:50px;" :src="item.img">
                    <h3>{{item.id}}. {{ item.name }}</h3>
                </div>
        </card>

</scroll>

以上用到的Props：

若要指定當滾動至底部或頂端時觸發事件，可利用Prop: on-reach-edge。

JS

以下當滾動至底部或頂端時，再隨機取得三筆資料加入清單。

const FOO_DATA_BASIC = [
    {id: 1, name:'Luke Skywalker',gender:'male', img:'https://goo.gl/KEUxHN'},
    //...
];

const FOO_DATA_BRIGHT = [
    {id: 1, name:'Luke Skywalker',gender:'male', img:'https://goo.gl/KEUxHN'},
    //...
];

const FOO_DATA_DARK = [
    {id: 9,name:'Darth Vader',gender:'male',img:'https://goo.gl/xcMHqj'},
    //...
];

var app = new Vue({
    el: "#app",
    data: {
        listData: []
    },
    methods: {
        handleReachBottom () {
            return new Promise(resolve => {
                setTimeout(() => {
                    for (let i = 0; i < 3; i++) { //Get random 3 records
                        let rndIndex = this.getRandomInt(0, FOO_DATA_BRIGHT.length-1)
                        this.listData.push(FOO_DATA_BRIGHT[rndIndex]);
                    }
                    resolve();
                }, 2000);
            });
        },
        handleReachTop(){
            return new Promise(resolve => {
                setTimeout(() => {
                    for (let i = 0; i < 3; i++) { //Get random 3 records
                        let rndIndex = this.getRandomInt(0, FOO_DATA_DARK.length-1)
                        this.listData.push(FOO_DATA_DARK[rndIndex]);
                    }
                    resolve();
                }, 2000);
            });
        },
        getRandomInt(min,max) {
            return Math.floor(Math.random()*(max-min+1)+min);
        }
    },
    created() {
        this.listData = FOO_DATA_BASIC;
    }
})

Demo

更多應用可參考相關API官方文件。

如果有興趣自己寫個Infinite Scroll，可參考小弟這篇文章：[Vue] Infinite scrolling page